*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  Helvetica,"PingFang SC","Microsoft Yahei",sans-serif;
    font-size: 14px; 
}
html,body{height:100%;}

.container {
    width: 100%;
    height: 100%;
    .header {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        background-color: white;
        box-shadow: 0px 0px 18px rgba(0,0,0,.06);
        box-sizing: border-box;
        .brand{
            width: 230px;
            height: 60px;
            background-color: #1f75d5;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.3s;
            .headline{
                color: white;
                font-size: 21px;
                font-weight: bold
            }
        }
        .brand_mini{
            width: 80px;
            height: 50px;
            background-color: #1f75d5;
            display: flex;
            justify-content: center;
            align-items: center; 
            transition: 0.3s;
            .headline_mini{
                color: white;
                font-size: 20px;
                font-weight: bold
            } 
        }
        .message_remind {
            position: absolute;
            right:160px;
            top: 50%;
            transform:translate(-50%,-50%);
            cursor: pointer;
        }
        .message_remind::after{
            content: "0"; 
            position:  absolute;
            width: 20px;
            height: 20px;
            right: -10px;
            top: -5px;
            background-color:#a8dadc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 20px;
        }
        .dropdown{
            position: absolute;
            right: 10px;
          
            a{
                height: 50px;
                align-items: center;  
                display: flex;
                width: 150px;
                
                // text-align: center;
            }   
        }
    }
    .sidebar {
        position: relative;
        transition: 0.3s;
        width: 230px;
        height: calc(  ~"100vh - 50px");;
        background-color: #fff;
        // overflow-y: hidden;
       .CollapseBtn {
        transition: 0.2s;
            position: absolute !important;
            z-index: 10;
            width: 40px;
            height: 40px;
            left: 250px;
            top: -50px;
            border-radius: 10px;
            background-color: #fff;
            border: none;
            outline: none;
            box-shadow: none;
        }  
    }
    .sidebar_mini {
        position: relative;
        width: 80px;
        height: calc(  ~"100vh - 50px");;
        background-color: #fff;
        transition: 0.3s;
       .CollapseBtn {
            transition: 0.2s;
            position: absolute !important;
            z-index: 10;
            width: 40px;
            height: 40px;
            left: 90px;
            top: -50px;
            border-radius: 10px;
            background-color: #fff;
            border: none;
            outline: none;
            box-shadow: none;
        }  
    }
    .main {
        display: flex;       
        .surround{
            // 自动占满 除了伸缩框 以外的部分
          flex: 1;
        //   height: calc(~"100vh - 50px");
          background-color:#fff ;         
        //   overflow: scroll;;
        }
     }
        
}
.ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
font-size: 16px;
}

.ant-menu-item span{
    font-size: 16px  !important;
}
.ant-menu-submenu-title span{
    font-size: 16px  !important;
}
.cutOverLongWord{
    display: inline-block;
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

